<!DOCTYPE html>
<html lang="en" xmlns="">
    <head>
        <meta charset="UTF-8">
        <title>千义文档</title>
        <script src="/js/vue.js"></script>
        <link rel="stylesheet" href="/css/element-ui.css"/>
        <script src="/js/element-ui.js"></script>
        <script src="/js/host_config.js"></script>
        <script src="/js/echarts.js"></script>
        <script src="/js/axios.js"></script>
    </head>
    <body>
        <div class="index" id="index">
            <div style="display: flex;">
                <div style="width: 12%;min-width: 205px">
                    <el-row class="tac unSelected">
                        <el-col :span="12">
                            <el-menu
                                    :default-active="activeIndex"
                                    class="el-menu-vertical-demo"
                            >
                                <el-menu-item index="1" @click="change('/portal/index')">
                                    <i class="el-icon-menu"></i>
                                    <span slot="title">&nbsp;&nbsp;概&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;览</span>
                                </el-menu-item>
                                <el-menu-item index="2" @click="change('/portal/service?size=12&current=1')">
                                    <i class="el-icon-position"></i>
                                    <span slot="title">&nbsp;&nbsp;服务中心</span>
                                </el-menu-item>
                                <el-menu-item index="3" @click="change('app-view-cmpt')">
                                    <i class="el-icon-user"></i>
                                    <span slot="title">&nbsp;&nbsp;应用列表</span>
                                </el-menu-item>
                                <el-menu-item index="4" @click="change('components-library-cmpt')">
                                    <i class="el-icon-s-operation"></i>
                                    <span slot="title">&nbsp;&nbsp;插&nbsp;&nbsp;件&nbsp;&nbsp;库</span>
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
                <div style="width: 87%; min-width: 1200px">
                    <div>
                        <el-card class="count-card unSelected">
                            <div style="display: flex;flex-direction: row;justify-content: space-between">
                                <el-card v-for="(item,index) in overview" :key="index" class="box-card-t"
                                         :style="item.background">
                                    <div class="text-t item-t" style="font-size: 22px">
                                        <i :class="item.icon" aria-hidden="true"></i>
                                        {{ item.title }}: {{ item.data }}{{ item.title === "成功率" ? "%" : "" }}
                                    </div>
                                </el-card>
                            </div>
                        </el-card>
                    </div>

                    <div>
                        <el-card class="box-card unSelected">
                            <div style="width: 100%;height: 300px" ref="top-count">
                            </div>
                        </el-card>
                    </div>
                    <div style="display: flex;flex-direction: row;margin-top: 15px;font-weight: bold"
                         class="unSelected">
                        <el-card class="" style="width: 80%">
                            <div ref="main" style="width: 100%;height: 200px">

                            </div>
                        </el-card>
                        <el-card class="monitor-card">
                            <div slot="header" class="clearfix">
                                <div style="display: flex;flex-direction: row;justify-content: space-between">
                                <span style="font-weight: bold">
                                    <i class="el-icon-ship" style="color: salmon;font-size: 17px">依赖服务</i>
                                </span>
                                    <span style="font-weight: bold" @click="refreshCount()">
                                    <i :class="refreshIcon" style="color: darkgreen;font-size: 17px"></i>
                                </span>
                                </div>
                            </div>

                            <div v-for="(item, index) in this.servers" :key="index" v-if="item"
                                 style="display: flex;flex-direction: column;">
                                <div style="display: flex;flex-direction: row;justify-content: space-between">
                                <span style="display: inline-block">
                                    <i style="color: plum;font-size: 17px" :class="item.icon"></i> {{ item.name }}
                                </span>
                                    <span style="display: inline-block">
                                    <i :class="item.status === 'life' ? 'el-icon-check green' : 'el-icon-close red'"></i>
                                </span>
                                </div>
                                <!-- Optional: Uncomment if needed -->
                                <!--                                 <div v-if="index < server.length - 1" -->
                                <!--                                      th:if=""-->
                                <!--                                      style="border: rgba(2,2,2,0.05) 1px dashed;margin: 10px 0 10px"></div> -->
                            </div>

                        </el-card>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script>
        let vm = new Vue({
            el: "#index",
            data() {
                return {
                    isLoading: false,
                    refreshIcon: "el-icon-refresh",
                    icon: ['el-icon-refresh', 'el-icon-loading'],
                    counted: {},
                    result: [],
                    activeIndex: '1',
                    graph_data: [],
                    graph_date: [],
                    api_name: [],
                    api_count: [],
                    line_name: ['总数', '成功数', '失败数'],
                    overview: [
                        {
                            title: "调用总数",
                            icon: "el-icon-s-promotion",
                            background: "background-color: #409EFF;",
                            data: 0
                        },
                        {title: "成功数", icon: "el-icon-success", background: "background-color: #67C23A;", data: 0},
                        {title: "失败数", icon: "el-icon-error", background: "background-color: #F56C6C;", data: 0},
                        {title: "成功率", icon: "el-icon-s-flag", background: "background-color: #909399;", data: 0}
                    ],
                    count: [],
                    servers: [
                        {name: "网关一", status: "life", icon: "el-icon-film"},
                        {name: "网关二", status: "life", icon: "el-icon-film"},
                        {name: "消息队列", status: "die", icon: "el-icon-help"},
                        {name: "Redis", status: "life", icon: "el-icon-stopwatch"}
                    ]
                };
            },
            methods: {
                refreshCount() {
                    window.location.reload()
                },
                loadData() {
                    axios.get(window.RT_ENV.host_config.host + "/api/statistics").then(res => {
                        this.result = res.data.data[1]
                        let apiCount = res.data.data[2]
                        this.overview[0].data = res.data.data[0].total
                        this.overview[1].data = res.data.data[0].success
                        this.overview[2].data = res.data.data[0].failed
                        this.overview[3].data = res.data.data[0].successRate
                        let sort = [{}, {}, {}, {"2": "1"}, {}]
                        this.result.forEach(i => {
                            if (i.date === "今天") {
                                sort[0] = i;
                            } else if (i.date === "昨天") {
                                sort[1] = i;
                            } else if (i.date === "前天") {
                                sort[2] = i;
                            } else {
                                if (sort[3]["2"] === "1") {
                                    sort[3] = i
                                } else {
                                    sort[4] = i
                                }
                            }
                        })
                        const totalArray1 = [];
                        const successArray1 = [];
                        const failed1 = [];
                        const time = [];
                        apiCount.forEach(item => {
                            this.api_name.push(item.name)
                            totalArray1.push(item.total);
                            successArray1.push(item.success);
                            failed1.push(item.failed)
                            time.push(item.time)
                        })
                        this.api_count.push(totalArray1, successArray1, failed1, time)
                        const totalArray = [];
                        const successArray = [];
                        const failed = [];
                        sort.forEach(item => {
                            this.graph_date.push(item.date)
                            totalArray.push(item.total);
                            successArray.push(item.success);
                            failed.push(item.failed)
                        });
                        this.graph_data.push(totalArray, successArray, failed)
                        this.drawChart();
                        this.refreshIcon = this.icon[0]
                        this.isLoading = false
                        this.$loading().close()
                    }).catch(e => {
                        this.isLoading = false
                        this.$loading().close()
                        e.toString()
                    })
                },
                change(i) {
                    window.open(i, "_self")
                },
                drawChart() {
                    let myChart = echarts.init(this.$refs['main'])
                    let top = echarts.init(this.$refs['top-count']);
                    let option1 = {
                        title: {text: 'API 调用详情'},
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {},
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: this.api_name
                        },
                        series: [
                            {
                                name: '成功数',
                                type: 'bar',
                                data: this.api_count[1]
                            },
                            {
                                name: '失败数',
                                type: 'bar',
                                data: this.api_count[2]
                            },
                            {
                                name: '总调用数',
                                type: 'bar',
                                data: this.api_count[0]
                            },
                            {
                                name: '平均耗时',
                                type: 'bar',
                                data: this.api_count[3]
                            }
                        ]
                    };

                    let option = {
                        xAxis: {
                            type: 'category',
                            data: this.graph_date
                        },
                        yAxis: {
                            type: 'value'
                        },
                        title: {
                            text: 'API调用趋势图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: this.line_name  //头部
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: false,
                            }
                        },
                        series: [
                            {
                                name: this.line_name[0],
                                type: 'line',
                                data: this.graph_data[0]
                            },
                            {
                                name: this.line_name[1],
                                type: 'line',
                                data: this.graph_data[1]
                            },
                            {
                                name: this.line_name[2],
                                type: 'line',
                                data: this.graph_data[2]
                            },
                        ]
                    };
                    top.setOption(option1)
                    myChart.setOption(option);
                },
                init() {
                    this.$loading()
                    this.clear()
                    if (!this.isLoading) {
                        this.isLoading = true;
                        this.loadData()
                    }
                }, clear() {
                    this.result = []
                    this.graph_data = []
                    this.graph_date = []
                    this.api_name = []
                    this.api_count = []
                    this.counted = {}
                    this.line_name = ['总数', '成功数', '失败数']
                    this.count = []
                },

            },
            mounted() {
                this.init()
                this.$nextTick(() => {
                    this.drawChart();
                });
            },
            created() {
            },
        });
    </script>
    <style>

        .box-card {
            text-align: left;
            margin-top: 15px;
        }

        .monitor-card {
            text-align: left;
            margin-left: 15px;
            width: 20%;
        }

        .count-card {
            text-align: left;
        }

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .top-content {
            overflow: hidden;
            padding: 5px;
            font-size: 14px;
            font-weight: bold;
            color: rgba(2, 2, 2, 0.6);
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 150px;
        //width: 50px; /* 设置容器宽度，根据需要进行调整 */
        }

        .top-title {
            font-size: 16px;
            font-weight: bold;
            color: rgba(2, 2, 2, 0.7);
            max-width: 150px;
        }

        .unSelected {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none;
        }

        .dividing-lines {
            border: rgba(2, 2, 2, 0.05) 1px solid;
            margin: 0 20px 0 20px;
        }

        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .text-t {
            font-size: 14px;
        }

        .item-t {
            padding: 25px 0;
            font-size: 17px;
        }

        .box-card-t {
            margin-left: 2%;
            color: #ffffff;
            margin-right: 2%;
            width: 250px;
            cursor: pointer;
            border-radius: 15px !important;
        }

        .el-menu-item {
            width: 200px !important;
            height: 100%;
        }

        .el-col-12 {
            width: 100% !important;

        }

        .tac {

        }

        .unSelected {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none;
        }

        .el-menu {
            background: none;
        }
    </style>
</html>
